<template>
	<div class="webpack-upload" style="display: inline-block;">
		<!--点击按钮上传-->
		<!--<el-upload
     	style="margin-left:10px;width:auto;display: inline-block;"
         :disabled="options.disabled"
         :action="uploadFileUrl"
         :show-file-list="false"
         :on-success="uppzSuccess"
         :before-upload="uppzBefore"
         :accept="options.accept"
         >
      -->
      
      <div class="webpack-upload-input" :id="webUploaderId" style="width:100%;height: 100%;"></div>
      		
      <el-button 
      	size="mini">
      	<i class="iconfont icon-shangchuan"></i>
      	本地上传
      </el-button>
      
      	
      
      <div class="upload-box" v-show="uploading">
      	 <el-progress :percentage="percentage"
 ></el-progress>
      </div>
 <!--
    </el-upload>-->
		
	</div>
</template>

<script>
	import {apiUrls} from "@/service/components/common";
	const md5 = require("js-md5");
	const WebUploader = require('webuploader');
	
	export default {
		props : [
			"options"
		],
		data(){
			return {
				webUploaderFn : null,
				webUploaderId : "filePicker" + parseInt(Math.random() *1000000),
				value : "",
				uploadFileUrl : apiUrls.uploadChunkFile,
				uploading : false,
				percentage : 0 ,
			}
		},
		mounted(){
			if(this.options.uploadFileUrl){
				this.uploadFileUrl = this.options.uploadFileUrl
			}
			this.init();
		},
		methods : {
			init(){
				if(this.webUploaderFn){
					return ;
				}
				let vm = this ;
				this.webUploaderFn = WebUploader.create({
	        pick: {
	          id: '#' + this.webUploaderId ,
	        },
	        formData: {
	          uuid: WebUploader.guid(),
	          //md5: md5(''),
	        },
	        auto: true,
	        server: this.uploadFileUrl , //uploadURL2,
	        disableGlobalDnd: true,
	        accept: {
	          extensions: 'zip'
	        },
	        chunked: true,
	        chunkSize: 2 * 1024 * 1024,
	        chunkRetry: 2,
	        fileNumLimit: 200,
	        fileVal: 'multipartFile',
	        duplicate : true,
	      })
				this.webUploaderFn.on('beforeFileQueued', function(file) {
	        if (file.ext !== 'zip') {
	          vm.$message.error('上传类型只能为zip')
	          return false
	        }
	      })
	      this.webUploaderFn.on('uploadStart', function(file) {
	        vm.percentage = 0;
	        vm.uploading = true ;
	      })
	      this.webUploaderFn.on('uploadBeforeSend', function(file) {
	        setTimeout(() => {
	          if (vm.percentage >= 100) {
	            vm.percentage = 100
	          } else {
	            vm.percentage = parseInt((file.chunk / file.chunks).toFixed(2)*100)  ;
	          }
	        }, 100)
	      })
	      this.webUploaderFn.on('uploadSuccess', function(file, res) {
	      	setTimeout(()=>{
	      		vm.uploading = false ;
	      		vm.$message.success('上传成功');
	      		vm.$emit("success","uploadBtn",{
		        	res ,
		        	file
		        })
	      	},1000)
	        vm.percentage = 100;
	      	//vm.setUpload()
	      })
	      this.webUploaderFn.on('uploadError', function(file, response) {
	      	vm.uploading = false ;
	        vm.percentage = 0
	        vm.$message.error('上传失败')
	        //vm.setUpload()
	      })
			},
			reset(){

			},

		}
	}
	
</script>

<style lang="scss">
	.webpack-upload {
		vertical-align: top;
		position: relative;
		
		& > div.webpack-upload-input {
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			
			& > div {
				width: 100% !important;
				height: 100% !important;
				background: #f00;
				
				label,input {
					width: 200%;
					vertical-align: top;
					height: 100%;
					margin-left: -80px;
					cursor: pointer;
				}
			}
		}
		
		.el-progress-bar__inner {
			transition: 1s;
		}
	}
</style>